<template>
  <div class="app-container home">
    <div class="main-page">
      <el-container>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="rank-list university-rank">
                <h2>热点高校排行榜</h2>
                <ul>
                  <li v-for="(item, index) in universityRanks" :key="index" :class="{ 'is-active': index === 0 }">
                    <span class="rank-position">{{ index + 1 }}</span>
                    <span class="rank-name">{{ item.schoolName }}</span>
                    <span class="rank-score">{{ item.total }}</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="rank-list major-rank">
                <h2>热门专业排行榜</h2>
                <ul>
                  <li v-for="(item, index) in majorRanks" :key="index" :class="{ 'is-active': index === 0 }">
                    <span class="rank-position">{{ index + 1 }}</span>
                    <span class="rank-name">{{ item.speciality }}</span>
                    <span class="rank-score">{{ item.total }}</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>

    <div class="dialog-content">
      <el-form ref="form" :model="form" label-width="100px">

        <el-form-item label-width="1px" :rules="rules">
          <el-input
            type="textarea"
            v-model="form.content"
            placeholder="输入您的高考分数、您的高考省份以及您的意向专业，我们将推荐结果发送至您的邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAis">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getAi,schoolTOP,specialityTOP} from '@/api/main';

export default {
  name: "Index",
  data() {
    return {
      // 表单校验
      rules: {
        content: [
          { required: true, message: "请输入信息", trigger: "blur" }
        ]
      },
      form: {
        content: undefined
      },
      universityRanks: [
        { schoolName: '清华大学', total: 95 },
        { schoolName: '北京大学', total: 94 },
        { schoolName: '浙江大学', total: 93 },
        // ... 更多高校数据
      ],
      majorRanks: [
        { speciality: '计算机科学与技术', total: 92 },
        { speciality: '金融学', total: 91 },
        { speciality: '软件工程', total: 90 },
        // ... 更多专业数据
      ],
    };
  },
  methods: {
    //调用ai接口分析
    getAis(){
      getAi(this.form.content)
      //重置输入内容
      alert("输入成功！")
      this.form.content= null
    },
    //获取高校热榜
    getSchoolTops(){
      schoolTOP().then(res=>{
        this.universityRanks=res
      })
    },
  //  获取专业热榜
    getSpecialityTop(){
      specialityTOP().then(res=>{
        this.majorRanks=res
      })
    }
  },
  created() {
    this.getSchoolTops()
    this.getSpecialityTop()
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.main-page {
  padding: 20px;
  color: #333;
}

.rank-list {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rank-list ul {
  list-style: none;
  padding: 0;
}

.rank-list ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.rank-list ul li:last-child {
  border-bottom: none;
}

.rank-position {
  width: 20px;
  text-align: center;
}

.rank-name {
  flex: 1;
}

.rank-score {
  width: 60px;
  text-align: right;
}

.university-rank {
  background-color: #f8f8f8;
}

.major-rank {
  background-color: #f0f0f0;
}

.el-header h1 {
  text-align: center;
  font-size: 24px;
  color: #409EFF;
}
</style>

